
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Dropdown Menu 03</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link
          href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
          rel="stylesheet"
      >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <nav class="accordion-container">
        <div class="main-item">
          <svg
              xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" 
              fill="none" stroke-linecap="round" stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M9 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z"></path>
            <path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4"></path>
            <path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z"></path>
            <path d="M3 6v10c0 .888 .772 1.45 2 2"></path>
            <path d="M3 11c0 .888 .772 1.45 2 2"></path>
          </svg>
          Payments
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="expand-icon"
            width="44"
            height="44"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M9 6l6 6l-6 6" />
          </svg>
        </div>
        <ul>
            <li>
              <div class="line-vertical"></div>
              <div class="line-horizontal"></div>
              <a href="#income" title="Income">
                Income
              </a>
            </li>
            <li>
              <div class="line-vertical"></div>
              <div class="line-horizontal"></div>
              <a href="#expenses" title="Expense">
                Expenses
              </a>
            </li>
            <li>
              <div class="line-vertical"></div>
              <div class="line-horizontal"></div>
              <a href="#statements" title="Statements">
                Statements
              </a>
            </li>
            <li>
              <div class="line-vertical"></div>
              <div class="line-horizontal"></div>
              <a href="#payouts" title="Payouts">
                Payouts
              </a>
            </li>
        </ul>
      </nav>
      <script src="script.js"></script>
    </body>
</html>